<template>
  <div class="app-container">
    <h5 class="titleInfo">基础信息</h5>
    <el-form
      ref="form" 
      class="form"
      :rules="rules"
      :model="checkServers"
      label-width="130px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="转让人手机号">
            <el-input v-model="transferorPhone" @change="telfn(1)" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="被转让人手机号">
            <el-input v-model="transfereePhone" @change="telfn(2)" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="转让人姓名">
            <el-input v-model="checkServers.transferorName" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="被转让人姓名">
            <el-input v-model="checkUsers.transfereeName" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="级别" prop="roleName">
            <el-input v-model="checkServers.roleName" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="账号类型" prop="type">
            <el-input v-model="checkServers.type" :disabled="true" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="签约金额" prop="amount">
            <el-input v-model="checkServers.amount" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="转让说明" prop="remark">
            <el-input v-model="checkServers.remark" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 推荐人信息 -->
      <div class="divBar" />
      <h5 class="titleInfo">推荐人信息</h5>

      <el-row>
        <el-col :span="12">
          <el-form-item label="推荐人姓名" prop="refereeName">
            <!-- <span v-if="list1.refereeName" class="spanToInput">{{list1.refereeName || "暂无"}}</span> -->
            <el-input v-model="checkServers.refereeName" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="推荐人手机号" prop="refereePhone">
            <!-- <span v-if="list1.referee" class="spanToInput">{{list1.referee|| "暂无"}}</span> -->
            <el-input v-model="checkServers.refereePhone" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 实名认证信息 -->
      <div class="divBar" />
      <h5 class="titleInfo">实名认证信息</h5>

      <el-row>
        <el-col :span="12">
          <el-form-item label="证件类型" prop="idCardType">
            <!--  <span v-if="form.userIdentityAuth" class="spanToInput">
              <span v-for="(i, index) in form.userIdentityAuth" :key="index">{{
                i.identityType | cardNull
              }}</span>
            </span> -->
            <el-select v-model="checkServers.idCardType" placeholder="请选择">
              <el-option
                v-for="item in cardOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证件号码" prop="idCard">
            <!--  <span v-if="form.userIdentityAuth" class="spanToInput">
              <span v-for="(i, index) in form.userIdentityAuth" :key="index">{{
                i.identity || "暂无"
              }}</span>
            </span>-->
            <el-input v-model="checkServers.idCard" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 银行卡信息 -->
      <div class="divBar" />
      <h5 class="titleInfo">银行卡信息</h5>

      <!-- <el-row v-for="(val, index) in form.bankCard" :key="index">
        <el-col :span="12">
          <el-form-item label="开户行">
            <span class="spanToInput">{{ val.bankName || "暂无" }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银行卡号">
            <span class="spanToInput">{{ val.cardNumber || "暂无" }}</span>
          </el-form-item>
        </el-col>
      </el-row> -->
      <div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开户行" prop="banksDTOListName">
              <el-input v-model="checkServers.banksDTOListName" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行卡号" prop="banksDTOListCard">
              <el-input v-model="checkServers.banksDTOListCard" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <el-form-item>
        <el-button
          style="margin:30px 0"
          type="primary"
          @click="submitFn('form')"
          >立即提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import assignment from "@/api/assignment";
export default {
  data() {
    return {
      transfereePhone: "",
      transferorPhone: "",
      checkServers: {},
      checkUsers: {},
      form: {},
      rules: {
        transferorName: [
          {
            required: true,
            message: "请输入转让人姓名",
            trigger: "blur"
          }
        ],
        transferorPhone: [
          {
            required: true,
            message: "请输入转让人手机号",
            trigger: "blur"
          }
        ],
        transfereeName: [
          {
            required: true,
            message: "请输入被转让人真实姓名",
            trigger: "blur"
          }
        ],
        transfereePhone: [
          {
            required: true,
            message: "被转让人手机号",
            trigger: "blur"
          }
        ],
        transfereeName: [
          {
            required: true,
            message: "请输入被转让人真实姓名",
            trigger: "blur"
          }
        ],
        roleName: [
          {
            required: true,
            message: "级别",
            trigger: "blur"
          }
        ],
        type: [
          {
            required: true,
            message: "账号类型",
            trigger: "blur"
          }
        ],
        amount: [
          {
            required: true,
            message: "签约金额",
            trigger: "blur"
          }
        ],
        remark: [
          {
            required: true,
            message: "转让说明",
            trigger: "blur"
          }
        ],
        refereeName: [
          {
            required: true,
            message: "推荐人姓名",
            trigger: "blur"
          }
        ],
        refereePhone: [
          {
            required: true,
            message: "推荐人手机号",
            trigger: "blur"
          }
        ],
        idCardType: [
          {
            required: true,
            message: "身份证件类型",
            trigger: "blur"
          }
        ],
        idCard: [
          {
            required: true,
            message: "证件号码",
            trigger: "blur"
          }
        ],
        banksDTOListCard: [
          {
            required: true,
            message: "银行卡号",
            trigger: "blur"
          }
        ],
        banksDTOListName: [
          {
            required: true,
            message: "银行卡名称",
            trigger: "blur"
          }
        ]
      },
      cardOption: []
    };
  },
  mounted() {
    this.cardOption = window.helper.cardType("listReturn");
  },
  methods: {
    async telfn(val, e) {
      let res = {
        data: {}
      };
      var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (val == 1) {
        if (myreg.test(this.transferorPhone)) {
          res = await assignment.checkServers({
            transferorPhone: this.transferorPhone
          });
        }
      } else {
        if (myreg.test(this.transferorPhone)) {
          res = await assignment.checkUsers({
            transfereePhone: this.transfereePhone
          });
        }
      }
      console.log(res);
      if (res.data.code == 0) {
        if (val == 1) {
          this.checkServers = res.data.data;
        } else {
          this.checkUsers = res.data.data;
        }
      } else {
        this.$message.error(res.data.msg ? res.data.msg : "手机号错误");
      }
    },
    submitFn(e) {
      this.$refs[e].validate(valid => {
        console.log(valid);
        if (valid) {
          this.checkUsers.idCardType = this.checkServers.idCardType;
          this.checkUsers.idCard = this.checkServers.idCard;
          let obj = Object.assign(this.checkServers, this.checkUsers);
          assignment.add(obj).then(res => {
            if (res.data.code == 0) {
              this.$message({
                message: "调整成功",
                type: "success"
              });
              this.$router.push("/assignment");
            } else {
              this.$message.error(res.data.msg);
            }
          });
        }
      });
    }
  }
};
</script>
